<template>
  <div class="main">
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item label="用户名" name="username">
        <a-input v-model:value="form.username" />
      </a-form-item>
      <a-form-item label="密码" name="password">
        <a-input v-model:value="form.password" type="password" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { message } from "ant-design-vue";
import { ref } from "vue";
import { loginApi } from "../utils/api";
import { useRoute, useRouter } from "vue-router";
// 获取路由对象
const route = useRoute();
const router = useRouter();

const form = ref({
  username: "",
  password: "",
});

const handleSubmit = () => {
  console.log(form.value.username, form.value.password);
  // TODO: 处理登录逻辑
  loginApi({
    username: form.value.username,
    password: form.value.password,
  }).then((res) => {
    if (res.code === 200) {
      message.success("登录成功");
      console.log(res.token);
      localStorage.setItem("username", res.username);
      localStorage.setItem("token", res.token);
      localStorage.setItem("id", res.id);
      router.push("/shouye");
    } else {
      message.error("登录失败");
    }
  });
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  .ant-form {
    width: 400px;
    height: 300px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>
